<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子模型</title>
	<style type="text/css">

       .content{
          display: -webkit-flex;
          -webkit-flex-direction:column;
          width: 100%;
          height: 600px;
       }

       .frist{
          height: 100px;
          -webkit-flex:1;
          -webkit-order:2;
          background-color: #0D84BF;
       }

       .secend{
          height: 100px;
          -webkit-flex:1;
          -webkit-order:3;
          background-color: #90847A;
       }

       .three{
          height: 200px;
          -webkit-flex:1;
          -webkit-order:1;
          background-color: #D44A40;
       }

       .content2{
          display:-webkit-box;
          -weikit-box-orient:vertical;
       }

       .frist2{
          height: 100px;
          -webkit-box-flex:1;
          background-color: #0D84BF;
       }

       .secend2{
          height: 100px;
          -webkit-box-flex:1;
          background-color: #90847A;
       }

       .three2{
          height: 200px;
          -webkit-box-flex:1;
          background-color: #D44A40;
       }


	</style>
</head>
<body>

<p>伸缩盒子（新---垂直排列）给宽度，高度就可以按比例分布--order排序</p>

<div class="content">

     <div class="frist">第一个</div>
     <div class="secend">第二个</div>
     <div class="three">第三个</div>

</div>

<hr/>
<p>伸缩盒子 （旧---水平排列）----不给宽度</p>
<div class="content2">

     <div class="frist2">第一个</div>
     <div class="secend2">第二个</div>
     <div class="three2">第三个</div>

</div>

</body>
</html>